<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span>
                {{$t('pdtnam')}}
                <el-input v-model.trim="selPro.productName" :placeholder="$t('plsipt')" size="mini"></el-input>
            </span>
            <span class="seachStatus">
                {{$t('sta')}}
                <el-select v-model="selPro.status" :placeholder="$t('plsset')" size="mini">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('vlid')" value="VALID"></el-option>
                    <el-option :label="$t('invlid')" value="INVALID"></el-option>
                </el-select>
            </span>
            <el-button type="primary" @click="seachprolist" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
            <el-button type="warning" @click="showAddPro" size="mini" v-preventReClick>{{$t('add')}}</el-button>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="proTab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="productName" :label="$t('pdtnam')">
                </el-table-column>
                <el-table-column prop="productCode" :label="$t('pdtcod')" min-width="133">
                </el-table-column>
                <el-table-column prop="parentCode" :label="$t('herlelcod')" min-width="112">
                </el-table-column>
                <el-table-column prop="rateType" :label="$t('rattyp')" min-width="80">
                </el-table-column>
                <el-table-column prop="rateValue" :label="$t('rate')" min-width="80">
                </el-table-column>
                <el-table-column prop="extRateValue" :label="$t('addrat')" min-width="116">
                </el-table-column>
                <el-table-column prop="status" :label="$t('sta')" min-width="80">
                </el-table-column>
                <el-table-column prop="sysCreateTime" :label="$t('addtim')" min-width="143">
                </el-table-column>
                <el-table-column prop="sysModifiedTime" :label="$t('modtim')" min-width="143">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showEditPro(scope.row.id)">{{$t('mdfy')}}</el-link>
                        <el-link type="primary" @click="showDel(scope.row.id)">{{$t('dlte')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="selPro.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="selPro.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :pager-count="5">
            </el-pagination>
        </el-card>
        <!-- 添加弹框 -->
        <el-dialog :title="$t('add')" :visible.sync="addDialogVisible" width="30%" @close="addDialogVisibleClosed(addProForm)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="addProForm" :rules="addProRul" :model="addProForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('pdtnam')" prop="productName">
                    <el-input v-model.trim="addProForm.productName" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('pdtcod')" prop="productCode">
                    <el-input v-model.trim="addProForm.productCode" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('herlelcod')" prop="parentCode">
                    <el-input v-model.trim="addProForm.parentCode" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('rate')" prop="rateValue">
                    <el-input v-model.trim="addProForm.rateValue" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('addrat')" prop="extRateValue">
                    <el-input v-model.trim="addProForm.extRateValue" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('rattyp')" prop="rateType">
                    <el-select v-model="addProForm.rateType" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('percentage')" value="01"></el-option>
                        <el-option :label="$t('presspen')" value="02"></el-option>
                        <el-option :label="$t('blend')" value="03"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('sta')" prop="status">
                    <el-select v-model="addProForm.status" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('vlid')" value="VALID"></el-option>
                        <el-option :label="$t('invlid')" value="INVALID"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addPro(addProForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="addDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <!-- 修改弹框 -->
        <el-dialog :title="$t('mdfy')" :visible.sync="editDialogVisible" width="30%" @close="editDialogVisibleClosed(editProForm)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="editProForm" :rules="editProRul" :model="editProForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('herlelcod')" prop="parentCode">
                    <el-input v-model.trim="editProForm.parentCode" :disabled="true" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('pdtnam')" prop="productName">
                    <el-input v-model.trim="editProForm.productName" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('pdtcod')" prop="productCode">
                    <el-input v-model.trim="editProForm.productCode" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('rate')" prop="rateValue">
                    <el-input v-model.trim="editProForm.rateValue" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('addrat')" prop="extRateValue">
                    <el-input v-model.trim="editProForm.extRateValue" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('rattyp')" prop="rateType">
                    <el-select v-model="editProForm.rateType" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('percentage')" value="01"></el-option>
                        <el-option :label="$t('presspen')" value="02"></el-option>
                        <el-option :label="$t('blend')" value="03"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('sta')" prop="status">
                    <el-select v-model="editProForm.status" class="sellong" :placeholder="$t('plsset')">
                        <el-option :label="$t('vlid')" value="VALID"></el-option>
                        <el-option :label="$t('invlid')" value="INVALID"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editPro(editProForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="editDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <!-- 删除区 -->
        <el-dialog :title="$t('dlte')" :visible.sync="delDialogVisible" width="30%" :modal-append-to-body="false">
            {{$t('delpro')}}
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="delPro" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="delDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    prolist,
    proadd,
    proeditdet,
    proedit,
    proremove
} from '@/libs/reqlist.js'
export default {
    data () {
        var isNumberVlidator = (rule, value, callback) => {
            var pattern = /^[0]+(.[0-9]{1,3})?$/
            if (!pattern.test(value)) {
                return callback(new Error(this.$t('plsenteradecwithdig')))
            } else {
                callback()
            }
        }
        return {
            id: 0,
            total: 0,
            isOk: false,
            addDialogVisible: false,
            delDialogVisible: false,
            editDialogVisible: false,
            selPro: {
                productName: null,
                status: null,
                id: '',
                productCode: '',
                rateType: '',
                rateValue: '',
                pageSize: 10,
                pageNum: 1
            },
            addProRul: {
                productName: [
                    { required: true, message: this.$t('protnamctemy'), trigger: 'blur' }
                ],
                productCode: [
                    { required: true, message: this.$t('protcodctemy'), trigger: 'blur' }
                ],
                parentCode: [
                    { required: true, message: this.$t('hierlevlcodctemy'), trigger: 'blur' }
                ],
                rateValue: [
                    { required: true, message: this.$t('ratecanety'), trigger: 'blur' },
                    { validator: isNumberVlidator, trigger: 'blur' }
                ],
                rateType: [
                    { required: true, message: this.$t('ratypectemy'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('stactemy'), trigger: 'blur' }
                ]
            },
            editProRul: {
                productName: [
                    { required: true, message: this.$t('protnamctemy'), trigger: 'blur' }
                ],
                productCode: [
                    { required: true, message: this.$t('protcodctemy'), trigger: 'blur' }
                ],
                rateValue: [
                    { required: true, message: this.$t('ratecanety'), trigger: 'blur' },
                    { validator: isNumberVlidator, trigger: 'blur' }
                ],
                rateType: [
                    { required: true, message: this.$t('ratypectemy'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('stactemy'), trigger: 'blur' }
                ]
            },
            proTab: [],
            addProForm: {
                productName: '',
                productCode: '',
                parentCode: null,
                rateValue: '',
                extRateValue: '',
                rateType: '',
                status: ''
            },
            editProForm: {
                productName: '',
                productCode: '',
                parentCode: null,
                rateValue: '',
                extRateValue: '',
                rateType: '',
                status: ''
            },
            editTab: {
                id: 0
            },
            delForm: {
                id: 0
            }
        }
    },
    methods: {
        seachprolist () {
            this.selPro.pageNum = 1
            this.getProList()
        },
        getProList () {
            prolist(JSON.stringify(this.selPro)).then(res => {
                res.data.data.list.forEach(item => {
                    if (item.status === 'INVALID') item.status = this.$t('invlid')
                    if (item.status === 'VALID') item.status = this.$t('vlid')
                    if (item.rateType === '01') item.rateType = this.$t('percentage')
                    if (item.rateType === '02') item.rateType = this.$t('presspen')
                    if (item.rateType === '03') item.rateType = this.$t('blend')
                })
                this.total = res.data.data.total - 0
                this.proTab = res.data.data.list
            })
        },
        handleSizeChange (newSize) {
            this.selPro.pageSize = newSize
            this.getProList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.selPro.pageNum = newNum
            window.localStorage.setItem('curpage', newNum)
            this.getProList()
        },
        showAddPro () {
            this.addDialogVisible = true
        },
        async addPro (form) {
            this.$refs[form].validate(async valid => {
                if (!valid) return
                if (this.addProForm.status === this.$t('invlid')) this.addProForm.status = 'INVALID'
                if (this.addProForm.status === this.$t('vlid')) this.addProForm.status = 'VALID'
                await proadd(JSON.stringify(this.addProForm)).then(res => {
                    if (res.data.code === '999902') {
                        this.$message.error(res.data.msg)
                        return false
                    }
                    this.$message({
                            message: this.$t('funaddsuc'),
                            type: 'success'
                        })
                    this.getProList()
                    this.addDialogVisible = false
                })
            })
        },
        showEditPro (id) {
            this.editTab.id = id
            this.editDialogVisible = true
            proeditdet(JSON.stringify(this.editTab.id)).then(res => {
                if (res.data.code === '000000') this.editProForm = res.data.data
            })
        },
        editPro (form) {
            this.$refs[form].validate(async valid => {
                if (!valid) return
                proedit(JSON.stringify(this.editProForm)).then(res => {
                    this.$message({
                            message: this.$t('modfunsuc'),
                            type: 'success'
                        })
                    this.getProList()
                    this.editDialogVisible = false
                })
            })
        },
        showDel (id) {
            this.delForm.id = id
            this.delDialogVisible = true
        },
        delPro () {
            proremove(JSON.stringify(this.delForm)).then(res => {
                this.delDialogVisible = false
                this.getProList()
            })
        },
        addDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        editDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        }
    },
    mounted () {
        if (window.localStorage.getItem('curpage')) this.selPro.pageNum = window.localStorage.getItem('curpage') - 0
        this.getProList()
    },
    destroyed () {
        if (window.localStorage.getItem('curpage')) window.localStorage.removeItem('curpage')
    }
}
</script>

<style lang="less" scoped>
@import './proMag.less';
</style>
